<template>
    <div class="container" style="height: 70vh">
      <!-- 下部内容区 -->
      <div class="content">
        <!-- 左侧区域 -->
        <div class="left-panel">
          <div class="panel-header">分类列表</div>
          <div class="panel-content">
                     <div class="folder-list">
             <div class="folder-header">
               <el-checkbox
                 :model-value="folderSelectAllStatus.value"
                 :indeterminate="folderSelectAllStatus.indeterminate"
                 @change="handleFolderSelectAll"
                 class="custom-checkbox">
                 全选分类
               </el-checkbox>
             </div>
             <div class="folder-items">
               <div v-for="folder in folders" :key="folder.id" class="folder-item"
                 :class="{ 'active': currentFolderId === folder.id }">
                 <el-checkbox
                   v-model="folder.checked"
                   @change="checked => handleFolderSelectChange(folder, checked)"
                   class="custom-checkbox folder-checkbox" />
                 <div class="folder-info" @click="handleFolderClick(folder.id)">
                   <div class="folder-icon">
                     <el-icon>
                       <Folder />
                     </el-icon>
                   </div>
                   <div class="folder-details">
                     <div class="folder-name">{{ folder.name }}</div>
                     <div class="folder-count">{{ folder.num }}个素材</div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
          </div>
        </div>
        <!-- 右侧区域 -->
        <div class="right-panel">
          <div class="panel-header">
            <div class="header-left">
              <span>音频列表</span>
              <span v-if="finnishedSelect.length > 0" class="selection-info">
                您已经选择了 {{ finnishedSelect.length }} 个素材
              </span>
            </div>
                     <!-- 工具栏 -->
           <div class="toolbar-actions">
             <el-button type="success" class="custom-button" @click="handleUpload">
               <el-icon><Upload /></el-icon>
               本地上传
             </el-button>
             <!-- 图片视图全选按钮 -->
             <el-checkbox
               v-if="!isTableView"
               :model-value="selectAllStatus.value"
               :indeterminate="selectAllStatus.indeterminate"
               @change="handleImageSelectAll"
               class="select-all-checkbox-toolbar">
               全选当前页
             </el-checkbox>
             <el-button @click="handleSure" circle class="action-btn" title="确定">
               <el-icon>
                 <Check />
               </el-icon>
             </el-button>
             <el-button @click="handleRefresh" circle class="action-btn" title="刷新">
               <el-icon>
                 <Refresh />
               </el-icon>
             </el-button>
             <el-button @click="handleViewSwitch" circle class="action-btn" :title="isTableView ? '切换为图片视图' : '切换为表格视图'">
               <el-icon>
                 <Operation />
               </el-icon>
             </el-button>
           </div>
          </div>
          <div class="panel-content">
            <!-- 内容区域 -->
            <div class="content-area">
              <!-- 表格视图 -->
              <el-table v-if="isTableView" ref="materialTable" :data="materials" class="custom-table"
                @select="handleTableSelect"
                @select-all="handleSelectAll"
                :row-key="row => row.id" bordered>
                <el-table-column type="selection" width="50" :selectable="isSelectable" />
                <el-table-column prop="title" label="素材名" min-width="120">
                  <template #default="scope">
                    <div class="material-title">
                      <el-icon class="material-thumb icon-placeholder"><Headset /></el-icon>
                      <span>{{ scope.row.title }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="duration" label="时长" min-width="80">
                  <template #default="scope">
                    <span class="duration-tag">{{ Number(scope.row.duration).toFixed(2) }}</span>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 图片视图 -->
              <div v-else class="grid-view">
                <!-- 图片卡片区域 -->
                <div class="cards-container">
                  <div v-for="item in materials" :key="item.id" class="material-card"
                    :class="{ 'selected': selectedMaterials.includes(item), 'disabled': item.xs_status !== 3 }"
                    @click="handleImageCardClick(item)">
                    <el-checkbox :model-value="selectedMaterials.includes(item)"
                      :disabled="item.xs_status !== 3"
                      @change="checked => handleImageSelectChange(item, checked)" @click.stop class="material-checkbox" />
                   <div class="material-preview">
                     <div class="icon-placeholder">
                       <el-icon><Headset /></el-icon>
                     </div>
                     <div class="duration-overlay">{{ Number(item.duration).toFixed(2) }}</div>
                   </div>
                   <div class="material-info">
                     <div class="material-title">{{ item.title }}</div>
                   </div>
                 </div>
                </div>
             </div>
            </div>
            <!-- 分页 -->
            <div class="pagination-bar">
              <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="totalCount"
                :page-size="pageSize" :current-page="currentPage" @current-change="handlePageChange"
                :page-sizes="[10,20,50,100]"
                @size-change="handleSizeChange" class="custom-pagination" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 隐藏的上传组件 -->
    <el-upload
      ref="uploadRef"
      :http-request="customUpload"
      :show-file-list="false"
      :accept="'audio/*'"
      :auto-upload="true"
      :with-credentials="false"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      :before-upload="beforeUpload"
      multiple
      style="display: none;"
    />
  </template>

  <script setup lang="ts">
  import { ref, onMounted, watch, computed, nextTick } from 'vue'
  import {
    Search,
    Position,
    FolderAdd,
    Delete,
    Upload,
    Files,
    Refresh,
    Operation,
    Headset,
    Check
  } from '@element-plus/icons-vue'
  import axiosUtil from '../../axios-util/axios-util'
  import utils from '../../utils/utils';
  import LocalStorageUtil from '../../utils/LocalStorageUtil';
  import { ElMessage } from 'element-plus'

  const props = defineProps({
    // 是否支持多选（已废弃，现在始终支持多选）
    multiple: {
      type: Boolean,
      default: true,
    }
  })

  //主题控制light  dark
  const theme = utils.getTheme();

  const searchText = ref('')
  const folders = ref([])
  const materials = ref([])
  const selectedMaterials = ref<any[]>([])
  const currentPage = ref(1)
  const pageSize = ref(10)
  const totalCount = ref(0)
  const isTableView = ref(true)
  let currentFolderId = ref(0)
  const materialTable = ref(null);
  const finnishedSelect = ref([])
  const uploadRef = ref()

  // 计算当前页面的全选状态
  const selectAllStatus = computed(() => {
    const selectableItems = materials.value.filter(item => item.xs_status === 3)
    const selectableCount = selectableItems.length

    if (selectableCount === 0) {
      return { value: false, indeterminate: false }
    }

    // 计算当前页面中已选中的项目数量
    const currentPageSelectedCount = selectableItems.filter(item =>
      selectedMaterials.value.some(selected => selected.id === item.id)
    ).length

    if (currentPageSelectedCount === 0) {
      return { value: false, indeterminate: false }
    } else if (currentPageSelectedCount === selectableCount) {
      return { value: true, indeterminate: false }
    } else {
      return { value: false, indeterminate: true }
    }
  })

  // 计算文件夹全选状态
  const folderSelectAllStatus = computed(() => {
    const folderCount = folders.value.length

    if (folderCount === 0) {
      return { value: false, indeterminate: false }
    }

    const selectedFolderCount = folders.value.filter(folder => folder.checked).length

    if (selectedFolderCount === 0) {
      return { value: false, indeterminate: false }
    } else if (selectedFolderCount === folderCount) {
      return { value: true, indeterminate: false }
    } else {
      return { value: false, indeterminate: true }
    }
  })

  onMounted(() => {
    initFolders()
  })

  // 监听选中素材的变化，同步表格选中状态
  watch(selectedMaterials, (newSelection) => {
    if (materialTable.value && isTableView.value) {
      // 避免在初始化过程中重复设置
      nextTick(() => {
        // 清空表格当前选中状态
        materialTable.value.clearSelection()
        // 重新设置选中状态
        newSelection.forEach(item => {
          materialTable.value.toggleRowSelection(item, true)
        })
      })
    }
  }, { deep: true })

  const initFolders = async () => {
    const response = await axiosUtil.post('api/buiattach/categoryList', {
      agentid: '0',
      mimetype: 'audio',
      storeid: LocalStorageUtil.get("id"),
    })
    if (response.data.code === 1 && response.data.data) {
      // 为每个文件夹添加 checked 属性
      folders.value = response.data.data.rows.map(folder => ({
        ...folder,
        checked: false
      }))
      initMaterials(response.data.data.rows[0].id)
    }
  }

  const initMaterials = async (id?: number) => {
    if (typeof id === 'number') {
      currentFolderId.value = id
    }
    const folderId = typeof id === 'number' ? id : currentFolderId.value
    const response = await axiosUtil.post('api/attachment/selectaliy', {
      agentid: '0',
      categoryid: folderId===0?'':folderId,
      fl_type: '',
      limit: pageSize.value,
      mimetype: 'audio',
      offset: currentPage.value,
      order: 'desc',
      searchtitle: searchText.value,
      op: '7B%22mimetype%22%3A%22LIKE%22%7D',
    })
    if (response.data.code === 1 && response.data.data) {
      materials.value = response.data.data.data
      totalCount.value = response.data.data.totalCount

      // 数据加载完成后，初始化当前页面的选中状态
      initCurrentPageSelection()
    }
  }

  const handleFolderClick = (id: number) => {
    currentPage.value = 1
    // 切换文件夹时清空 finnishedSelect
    // finnishedSelect.value = []
    initMaterials(id)
  }

  const handleRefresh = () => {
    initMaterials()
  }

  const handleSure = () => {
    // 触发事件通知父组件
    emit('confirm')
  }

  const emit = defineEmits(['confirm'])

  const handleViewSwitch = () => {
    isTableView.value = !isTableView.value
    // 视图切换后，重新初始化选中状态
    nextTick(() => {
      initCurrentPageSelection()
    })
  }

  const handleTableSelect = (selection, row) => {
    // 始终支持多选：直接更新选中的素材列表
    selectedMaterials.value = selection

    // 更新 finnishedSelect
    // 检查当前行是否在 selection 中
    const isSelected = selection.includes(row)

    if (isSelected) {
      // 如果选中了，检查是否已存在于 finnishedSelect 中
      const exists = finnishedSelect.value.some(item => item.id === row.id)
      if (!exists) {
        finnishedSelect.value.push(row)
      }
    } else {
      // 如果取消选中了，从 finnishedSelect 中移除
      const index = finnishedSelect.value.findIndex(item => item.id === row.id)
      if (index !== -1) {
        finnishedSelect.value.splice(index, 1)
      }
    }
  }

  const handleImageSelectChange = (item: any, checked: boolean) => {
    // xs_status !== 3 的素材禁止选择
    if (item.xs_status !== 3) {
      return
    }
    // 始终支持多选
    if (checked) {
      if (!selectedMaterials.value.includes(item)) {
        selectedMaterials.value.push(item)
      }
      // 更新 finnishedSelect - 选中时添加
      const exists = finnishedSelect.value.some(finishedItem => finishedItem.id === item.id)
      if (!exists) {
        finnishedSelect.value.push(item)
      }
    } else {
      const idx = selectedMaterials.value.indexOf(item)
      if (idx !== -1) {
        selectedMaterials.value.splice(idx, 1)
      }
      // 更新 finnishedSelect - 取消选中时移除
      const index = finnishedSelect.value.findIndex(finishedItem => finishedItem.id === item.id)
      if (index !== -1) {
        finnishedSelect.value.splice(index, 1)
      }
    }
  }

  const handleImageCardClick = (item: any) => {
    // xs_status !== 3 的素材禁止选择
    if (item.xs_status !== 3) {
      return
    }
    // 始终支持多选
    const idx = selectedMaterials.value.indexOf(item)
    if (idx === -1) {
      selectedMaterials.value.push(item)
      // 更新 finnishedSelect - 选中时添加
      const exists = finnishedSelect.value.some(finishedItem => finishedItem.id === item.id)
      if (!exists) {
        finnishedSelect.value.push(item)
      }
    } else {
      selectedMaterials.value.splice(idx, 1)
      // 更新 finnishedSelect - 取消选中时移除
      const index = finnishedSelect.value.findIndex(finishedItem => finishedItem.id === item.id)
      if (index !== -1) {
        finnishedSelect.value.splice(index, 1)
      }
    }
  }

  const handlePageChange = (page: number) => {
    currentPage.value = page
    initMaterials()
  }

  const handleSizeChange = (size: number) => {
    pageSize.value = size
    initMaterials()
  }

  const isSelectable = (row: any) => {
    // xs_status !== 3 的素材禁止选择
    return row.xs_status === 3
  }

  // 初始化当前页面的选中状态
  const initCurrentPageSelection = () => {
    // 清空当前页面的选中状态
    selectedMaterials.value = []

    // 遍历当前页面的数据，检查是否在 finnishedSelect 中
    materials.value.forEach(item => {
      if (item.xs_status === 3) { // 只处理可选择的项目
        const exists = finnishedSelect.value.some(finishedItem => finishedItem.id === item.id)
        if (exists) {
          selectedMaterials.value.push(item)
        }
      }
    })

    // 如果是表格视图，需要等待表格渲染完成后同步选中状态
    if (isTableView.value && materialTable.value) {
      nextTick(() => {
        // 清空表格当前选中状态
        materialTable.value.clearSelection()
        // 重新设置选中状态
        selectedMaterials.value.forEach(item => {
          materialTable.value.toggleRowSelection(item, true)
        })
      })
    }
  }

  const handleImageSelectAll = (checked: boolean) => {
    // 获取当前页面可选择的素材
    const selectableItems = materials.value.filter(item => item.xs_status === 3)

    if (checked) {
      // 全选：将所有可选择的素材添加到选中列表
      selectableItems.forEach(item => {
        if (!selectedMaterials.value.includes(item)) {
          selectedMaterials.value.push(item)
        }
        // 更新 finnishedSelect
        const exists = finnishedSelect.value.some(finishedItem => finishedItem.id === item.id)
        if (!exists) {
          finnishedSelect.value.push(item)
        }
      })
    } else {
      // 取消全选：从选中列表中移除当前页面的所有素材
      selectableItems.forEach(item => {
        const idx = selectedMaterials.value.indexOf(item)
        if (idx !== -1) {
          selectedMaterials.value.splice(idx, 1)
        }
        // 更新 finnishedSelect
        const index = finnishedSelect.value.findIndex(finishedItem => finishedItem.id === item.id)
        if (index !== -1) {
          finnishedSelect.value.splice(index, 1)
        }
      })
    }
  }

  const handleSelectAll = (selection) => {
    // 始终支持多选：更新为全选状态
    selectedMaterials.value = selection

    // 更新 finnishedSelect
    // 遍历当前页面的所有素材
    materials.value.forEach(item => {
      const isSelected = selection.includes(item)
      const exists = finnishedSelect.value.some(finishedItem => finishedItem.id === item.id)

      if (isSelected && !exists) {
        // 如果选中了且不在 finnishedSelect 中，则添加
        finnishedSelect.value.push(item)
      } else if (!isSelected && exists) {
        // 如果取消选中了且在 finnishedSelect 中，则移除
        const index = finnishedSelect.value.findIndex(finishedItem => finishedItem.id === item.id)
        if (index !== -1) {
          finnishedSelect.value.splice(index, 1)
        }
      }
    })
  }

  const handleMove = () => {
    // 处理素材移动
  }

  const handleNewFolder = () => {
    // 处理新建文件夹
  }

  const handleDelete = () => {
    // 处理删除
  }

  const handleUpload = () => {
    // 触发el-upload的文件选择
    uploadRef.value?.$el.querySelector('input').click()
  }

  const customUpload = async (option: any) => {
    try {
      // 1. 请求后端获取OSS签名URL
      const res = await axiosUtil.post('api/filests/upload_ai', {
        type: option.file.type,
        name: option.file.name,
        size: option.file.size,
        fl_type: ''
      });
      const ossUrl = res.data; // 假设后端返回的就是OSS上传地址

      // 2. 用fetch PUT文件到OSS
      await fetch(ossUrl, {
        method: 'PUT',
        body: option.file,
        headers: {
          'Content-Type': option.file.type
        }
      });

      const resp = await axiosUtil.post('api/filests/upload_ai_callback', {
        categoryid: currentFolderId.value,
        fl_type: '',
        type: option.file.type,
        name: option.file.name,
        size: option.file.size,
        storeid: LocalStorageUtil.get("id"),
        url: ossUrl
      });

      if (resp.data.code === 1) {
        ElMessage.success(`${option.file.name} 上传成功`);
        // 上传成功后刷新列表
        await refreshAfterUpload();
      } else {
        throw new Error('上传回调失败');
      }

      // 3. 通知el-upload上传成功
      option.onSuccess({}, option.file);
    } catch (error) {
      ElMessage.error(`${option.file.name} 上传失败: ${error.message}`);
      option.onError(error, option.file);
    }
  }

  // 文件上传前的验证
  const beforeUpload = (file: File) => {
    // 检查文件类型
    const isAudio = file.type.startsWith('audio/');
    if (!isAudio) {
      ElMessage.error('只能上传音频文件!');
      return false;
    }

    // 检查文件大小 (例如限制为50MB)
    const isLt50M = file.size / 1024 / 1024 < 50;
    if (!isLt50M) {
      ElMessage.error('音频大小不能超过 50MB!');
      return false;
    }

    return true;
  };

  // 上传错误处理
  const handleUploadError = (error: any, file: File) => {
    console.error('Upload error:', error);
    ElMessage.error(`${file.name} 上传失败`);
  };

  const handleUploadSuccess = () => {
    // 上传成功后的处理已在customUpload中完成
  }

  // 刷新列表
  const refreshAfterUpload = async () => {
    const prevFolderId = currentFolderId.value;
    await initFolders();

    const found = folders.value.find((folder: any) => folder.id === prevFolderId);
    if (found) {
      currentFolderId.value = found.id;
    } else if (folders.value.length > 0) {
      currentFolderId.value = folders.value[0].id;
    }
    await initMaterials(currentFolderId.value);
  };

  const handleAllMaterials = () => {
    // 处理全部素材
  }

  const handleSearch = () => {
    // 处理搜索
  }

  // 处理文件夹全选
  const handleFolderSelectAll = async (checked: boolean) => {
    // 先更新所有文件夹的选中状态
    folders.value.forEach(folder => {
      folder.checked = checked
    })

    // 然后处理所有文件夹的素材
    for (const folder of folders.value) {
      if (checked) {
        // 全选时：获取该文件夹下的所有文件并添加到 finnishedSelect
        await loadFolderAllMaterials(folder.id, true)
      } else {
        // 取消全选时：获取该文件夹下的所有文件并从 finnishedSelect 中移除
        await loadFolderAllMaterials(folder.id, false)
      }
    }

    // 立即更新当前页面的选中状态
    nextTick(() => {
      initCurrentPageSelection()
    })
  }

  // 处理单个文件夹选择
  const handleFolderSelectChange = async (folder: any, checked: boolean) => {
    folder.checked = checked

    if (checked) {
      // 选中时：获取该文件夹下的所有文件并添加到 finnishedSelect
      await loadFolderAllMaterials(folder.id, true)
    } else {
      // 取消选中时：获取该文件夹下的所有文件并从 finnishedSelect 中移除
      await loadFolderAllMaterials(folder.id, false)
    }

    // 立即更新当前页面的选中状态
    nextTick(() => {
      initCurrentPageSelection()
    })
  }

  // 加载文件夹下的所有素材
  const loadFolderAllMaterials = async (folderId: number, isAdd: boolean) => {
    try {
      const response = await axiosUtil.post('api/attachment/selectaliy', {
        agentid: '0',
        categoryid: folderId,
        fl_type: '',
        limit: 9999, // 设置较大的页面大小以获取所有数据
        mimetype: 'audio',
        offset: 0,
        order: 'desc',
        searchtitle: '',
        op: '7B%22mimetype%22%3A%22LIKE%22%7D',
      })

      if (response.data.code === 1 && response.data.data) {
        const folderMaterials = response.data.data.data

        // 过滤出 xs_status === 3 的素材
        const selectableMaterials = folderMaterials.filter(item => item.xs_status === 3)

        if (isAdd) {
          // 添加到 finnishedSelect，避免重复
          selectableMaterials.forEach(item => {
            const exists = finnishedSelect.value.some(finishedItem => finishedItem.id === item.id)
            if (!exists) {
              finnishedSelect.value.push(item)
            }
          })
        } else {
          // 从 finnishedSelect 中移除
          selectableMaterials.forEach(item => {
            const index = finnishedSelect.value.findIndex(finishedItem => finishedItem.id === item.id)
            if (index !== -1) {
              finnishedSelect.value.splice(index, 1)
            }
          })
        }
      }
    } catch (error) {
      console.error('加载文件夹素材失败:', error)
    }
  }

  const getSelectMateria = () => {
    return selectedMaterials.value[0];
  }

  const getSelectMateriaAll = () => {
    return selectedMaterials.value[0];
  }

  const getFinnishedSelect = () => {
    return finnishedSelect.value;
  }

  defineExpose({
    getSelectMateria,
    getSelectMateriaAll,
    getFinnishedSelect
  })
  </script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: transparent;
  padding: 16px;
  gap: 16px;
  box-sizing: border-box;
  overflow: hidden;
  --el-text-color-regular: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  --el-text-color-primary: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  --el-fill-color-light: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.4)" : "rgba(255, 255, 255, 0.4)"');
}

.content {
  flex: 1;
  display: flex;
  gap: 16px;
  min-height: 0;
  overflow: hidden;
}

.left-panel, .right-panel {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"');
  border-radius: 12px;
  box-shadow: 0 0 20px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.3)"');
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.left-panel {
  width: 20%;
  padding: 0 8px;
}

.right-panel {
  width: 80%;
  display: flex;
  flex-direction: column;
}

.panel-header {
  padding: 12px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.2)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
  font-size: 1.1em;
  font-weight: bold;
  /* background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"'); */
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.selection-info {
  font-size: 0.9em;
  font-weight: normal;
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto !important;
}

.toolbar-actions {
  /* background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"'); */
  /* border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"'); */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.select-all-checkbox-toolbar {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
  font-weight: 500;
  margin-right: 8px;
}

.content-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-height: 0;
}

.pagination-bar {
  padding: 16px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
  border-top: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"');
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

/* 修改滚动条样式 */
.content-area::-webkit-scrollbar {
  width: 6px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.2)"');
}

.content-area::-webkit-scrollbar-thumb {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(255, 255, 255, 0.3)"');
  border-radius: 3px;
}

.content-area::-webkit-scrollbar-thumb:hover {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.4)" : "rgba(255, 255, 255, 0.4)"');
}

.content-area::-webkit-scrollbar-track {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.2)"');
  border-radius: 3px;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"');
}

.panel-content::-webkit-scrollbar {
  width: 6px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.2)"');
}

.panel-content::-webkit-scrollbar-thumb {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(255, 255, 255, 0.3)"');
  border-radius: 3px;
}

.panel-content::-webkit-scrollbar-thumb:hover {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.4)" : "rgba(255, 255, 255, 0.4)"');
}

.panel-content::-webkit-scrollbar-track {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.2)"');
  border-radius: 3px;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.3)"');
}

/* 左侧面板样式优化 */
.folder-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}

.folder-header {
  padding: 8px 12px;
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.2)"');
  border-radius: 6px 6px 0 0;
}

.folder-checkbox {
  margin-right: 8px;
}

.folder-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px;
}

.folder-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: 6px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  transition: all 0.3s ease;
  cursor: pointer;
}

.folder-item:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  transform: translateX(4px);
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"');
  box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.3)"');
}

.folder-item.active {
  background: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"');
  border-color: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.5)" : "rgba(64, 158, 255, 0.6)"');
  box-shadow: 0 0 20px v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"');
}

.folder-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.folder-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 170, 255, 0.2);
  border-radius: 6px;
  color: #00aaff;
}

.folder-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.folder-name {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-count {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.6)" : "rgba(255, 255, 255, 0.6)"');
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 右侧面板样式优化 */
.action-btn {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"') !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"') !important;
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
  transition: all 0.3s ease !important;
}

.action-btn:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"') !important;
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.5)"') !important;
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
  transform: translateY(-2px);
  box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.3)"');
}

/* 自定义按钮样式 */
.custom-button {
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"') !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"') !important;
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
}

.custom-button:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"') !important;
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.5)"') !important;
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
  transform: translateY(-2px);
  box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.3)"');
}

/* 表格视图样式 */
.custom-table {
  background: transparent !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"') !important;
  border-radius: 8px !important;
  overflow: hidden;
}

.custom-table :deep(.el-table__header) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
}

.custom-table :deep(.el-table__header th) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.3)"') !important;
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
  font-weight: bold !important;
}

.custom-table :deep(.el-table__header-wrapper) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
}

.custom-table :deep(.el-table__header tr) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
}

.custom-table :deep(.el-table__body-wrapper) {
  background: transparent !important;
}

.custom-table :deep(.el-table__body td) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(16, 18, 45, 0.2)"') !important;
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"') !important;
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
}

.custom-table :deep(.el-table__row) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(16, 18, 45, 0.2)"') !important;
  transition: all 0.3s ease !important;
}

.custom-table :deep(.el-table__row:hover) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.3)"') !important;
}

.custom-table :deep(.el-table__row:hover td) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.3)"') !important;
}

.custom-table :deep(.el-table__cell) {
  background: transparent !important;
}

.material-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.material-thumb {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
}

.duration-tag {
  background: rgba(0, 170, 255, 0.2);
  color: #00aaff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* 图片视图样式 */
.grid-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 10px;
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.material-card {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
}

.material-card:hover {
  transform: translateY(-4px);
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"');
  box-shadow: 0 0 20px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.3)"');
}

.material-card.selected {
  border-color: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.5)" : "rgba(64, 158, 255, 0.6)"');
  box-shadow: 0 0 25px v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"');
}

.material-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.material-card.disabled:hover {
  transform: none;
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  box-shadow: none;
}

.material-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  border-radius: 4px;
}

.material-preview {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 比例 */
}

.material-preview img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.duration-overlay {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 40, 80, 0.8);
  color: #00aaff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.material-info {
  padding: 10px;
}

.material-info .material-title {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 分页样式 */
.custom-pagination :deep(.el-pagination) {
  background: transparent;
}

.custom-pagination :deep(.el-pagination .el-pagination__total),
.custom-pagination :deep(.el-pagination .el-pagination__jump) {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.custom-pagination :deep(.el-pagination .btn-prev),
.custom-pagination :deep(.el-pagination .btn-next) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.custom-pagination :deep(.el-pagination .el-pager li) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.custom-pagination :deep(.el-pagination .el-pager li.active) {
  background: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"');
  border-color: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.5)" : "rgba(64, 158, 255, 0.6)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.custom-pagination :deep(.el-pagination .el-pager li:hover) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"');
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.5)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

/* 自定义复选框样式 */
.custom-checkbox :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #00aaff;
  border-color: #00aaff;
}

.custom-checkbox :deep(.el-checkbox__inner:hover) {
  border-color: #00aaff;
}

/* 响应式布局优化 */
@media screen and (max-width: 1366px) {
  .grid-view {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

@media screen and (max-width: 768px) {
  .grid-view {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .folder-item {
    padding: 8px;
  }

  .folder-icon {
    width: 28px;
    height: 28px;
  }
}

/* 音频图标占位符样式 */
.icon-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 170, 255, 0.1);
  color: #00aaff;
  font-size: 20px;
}
</style>
